<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>父子组件传值</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<counter :count="0" @change="hanlechange"></counter>
<counter :count="1" @change="handlechange"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],
/*父组件向子组件传值通过属性,但子组件不能修改父组件传递过来的参数，单向数据流
防止子组件改变父组件中的引用类型数据，一旦父组件被其他组件引用会互相影响
*/
data:function(){
   return{number:this.count}//将父组件传的值赋给子组件副本
},
template:"<div @click='handleclick'> {{count}}</div>",
methods:{
handleclick:function(){
 this.number=this.number+2;
 this.$emit('change',2)
}
}
}
var vm=new Vue({
el:"#app",
components:{
counter:counter
},
data:{
total:5

},
methods:{
handlechange:function(){
alert("change")
}
}
})
</script>
</body>